@import './common.less';
// 头部
.el-header {
  height: @header-height;
  line-height: @header-height;
  background-color: @header-bg-color;
  padding: 0 @font-size-20;
  color: red;
}

// 侧边栏
.el-aside {
  overflow-x: hidden;
  position: relative;
  width: 200px !important;
  background-color: @aside-bg-color;

  .aside-title {
    height: 56px;
    line-height: 56px;
    color: @bg-color-white;
    font-weight: bold;
    font-size: @font-size-16;
    padding-left: 20px;
  }

  .side-icon {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 56px;
    line-height: 56px;
    background-color: red;
    cursor: pointer;
    font-size: 20px;
    background-color: #262f3e;
    color: #7C878E;

    div {
      padding-left: 20px;
      float: left;
      width: 65px;
      height: 100%;

      &:hover {
        background-color: #344258;
      }

      &:hover i {
        color: @bg-color-white;
      }
    }
  }
}

// 导航菜单
.el-menu {
  // 垂直-默认
  border: none;
  background-color: @menu-bg-color;

  .el-menu-item {
    height: @menu-item-height;
    line-height: @menu-item-height;
    color: @menu-item-text-color;
    font-size: @font-size-14;

    &:hover {
      color: @menu-item-text-color-hover;
      background-color: @menu-item-bg-color-hover;
      border-bottom: none;
    }

    &.is-active {
      color: @menu-item-text-color-active;
      background-color: @menu-item-bg-color-active;

    }
  }

  .el-submenu [class^=el-icon-],
  .el-menu-item [class^=el-icon-] {
    margin-right: 0;
    text-align: left !important;
  }

  .el-submenu {
    transition: .05s;

    &:hover {
      transition: .05s;
    }

    .el-submenu__title {
      height: @menu-item-height;
      line-height: @menu-item-height;
      color: @menu-item-text-color;
      font-size: @font-size-14;

      &:hover,
      &.is-active {
        color: @menu-item-text-color;
        background-color: @menu-item-bg-color-hover;
        border-bottom: none;
      }
    }

    .el-submenu__icon-arrow {
      color: #C1C6C8;
    }
  }

  // 水平-头部
  &.el-menu--horizontal {
    display: block !important;
    background-color: @header-bg-color;
    height: @header-height;
    border: none;

    .el-menu-item {
      padding: 0 10px;
      border: none;
      outline: none;
    }

    .el-menu-item,
    .el-submenu {
      height: @header-height;
      line-height: @header-height;
      color: @menu-item-text-color;
      font-size: @font-size-12;

      &:hover {
        color: @header-text-color-hover;
        background-color: #262F3E;
        border-bottom: none;
      }

      &.is-active {
        color: @header-text-color-hover;
        background-color: #262F3E;
        border-bottom: none;
      }

      // 有下拉
      .el-submenu__title {
        height: @header-height;
        line-height: @header-height;
        font-size: @font-size-12;
        color: @menu-item-text-color;
        border-bottom: none;

        .el-submenu__icon-arrow {
          color: @menu-item-text-color;
          font-weight: bold;
        }

        &:hover {
          color: @header-text-color-hover;
          background-color: @header-bg-color-hover;
        }

        &:hover .el-submenu__icon-arrow {
          color: @header-text-color-hover;
          ;
        }
      }
    }
  }

  // popup
  &.el-menu--popup {
    transition-delay: 0ms;
    background-color: @menu-bg-color;
    border-radius: 0;

    &.el-menu--popup-bottom-start {
      margin-top: 0;
    }

    .el-menu-item {
      background-color: @menu-item-bg-color  !important;
      color: @menu-item-text-color  !important;
      font-size: @font-size-12;
      padding: 0 @font-size-15;

      &:hover {
        color: @bg-color-white  !important;
        background-color: @menu-item-bg-color-hover  !important;
        padding: 0 @font-size-15;

        i {
          color: @bg-color-white;
        }
      }
    }
  }

  &::-webkit-scrollbar {
    width: 6px;
    height: 10px;
  }
}

// 下拉条件
.el-menu--horizontal {
  &:hover {
    transition-delay: 0;
  }

  transition-delay: 0s;
  transition-duration: 150ms;

  .el-zoom-in-top-enter-active,
  .el-zoom-in-top-leave-active {
    transition-delay: 0s;
    transition-duration: 150ms;
  }
}


/**
* .el-button
*/
.el-button {
  border-radius: 0;
  // border-color: #DDDDDD !important;
  // background-color: white !important;
  // color: #006eff !important;
  // color: #333333 !important;
  transition: all 150ms linear;

  &:hover {
    // background-color: #F2F2F2 !important;
    // border-color: #DDDDDD !important;
  }
}

.el-button--primary {
  background-color: #006EFF !important;
  border-color: #006EFF !important;
  color: white !important;

  &:hover {
    background-color: #2A86FF !important;
    border-color: #2A86FF !important;
    color: white !important;
  }
}

.el-button--mini {
  height: 30px;
}

// loading 背景颜色
.el-loading-mask {
  background: rgba(0, 0, 0, .45);
}

/**
 *.el-message-box
 */
.el-message-box {
  border-radius: 0;
  .el-message-box__headerbtn .el-message-box__close {
    color: #888888;
    font-weight: bold;
    font-size: @font-size-16;

    &:hover {
      background-color: #F2F2F2;
    }
  }

  .el-message-box__title {
    font-size: @font-size-14;
    color: #000000;
    font-weight: bold;
  }

  .el-button--small,
  .el-button--small.is-round {
    padding: 8px 15px;
  }

  .el-button {
    color: #006eff !important;
  }

  .el-button--primary {
    color: white !important;
  }

  .el-message-box__btns {
    text-align: center;
  }
}

.el-message {
  border-radius: 0;
}

// 表格
.el-table {
  font-size: @font-size-12;
  color: #333333;

  thead {
    color: #999999;
    font-size: @font-size-12;
  }
}

// 单元格底线
.el-table td,
.el-table th.is-leaf {
  border-bottom-color: #E7EAEF;
}

// 表格底线
.el-table--border::after,
.el-table--group::after,
.el-table::before {
  background-color: #CFD5DE;
}


// 分页
.el-pagination {
  ul {
    margin: 0;
    padding: 0;
    -webkit-margin-before: 0;
    -webkit-padding-start: 0;
  }

  .el-input__inner {
    border-radius: 0 !important;
  }

  .el-input--mini .el-input__inner {
    height: 25px;
    line-height: 25px;
  }

  .el-pagination__editor.el-input .el-input__inner {
    height: 25px;
    line-height: 25px;
  }

  .el-pager li {
    // border: 1px solid red;
    // background-color: red;;
  }
}

.el-select-dropdown {
  border-radius: 0;

  .el-select-dropdown__list {
    padding: 0;
  }

  .el-select-dropdown__item.selected {
    background-color: #006EFF;
    color: white
  }
}

.el-select .el-input.is-focus .el-input__inner {
  border-color: #006EFF;
}

.el-pager li.active {
  color: #006EFF;
}

.el-select-dropdown__item {
  font-size: @font-size-12;
}

/**
* 表单
*/
.el-input__inner {
  border-radius: 0;
  border: 1px solid #cccccc;
}

.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
  margin-bottom: 0;
}

.el-input--mini .el-input__inner {
  height: 30px;
  line-height: 30px;
  color: #171718;
  padding: 0 10px;
}

.el-input.is-active .el-input__inner,
.el-input__inner:focus {
  border-radius: #006EFF;
}

.el-divider__text,
.el-link {
  font-size: @font-size-12;
}

// tag
.el-tag {
  color: #006EFF;
  border-radius: 0;
  background-color: #E5F0FF;
  border-color: #97C7FF;
}

.el-tag.el-tag--warning {
  color: #E6A23C;
  background-color: #FFF7F6;
  border-color: #FBE0E0;
}

.el-link.el-link--primary {
  color: #006EFF;

  &:hover {
    color: #006EFF;
    text-decoration: underline;
  }
}

// 单列 超出部分显示省略号
.el-tooltip__popper {
  border-radius: 0;
}

.el-popper[x-placement^=bottom] .popper__arrow::after {
  border-bottom-color: #006eff;
}
.el-dialog {
  .el-dialog__header {
    padding: 10px 20px 10px;
  }
  .el-dialog__header {
    padding: 1px 20px 10px;
  }
}